import React from 'react';
import cls from 'classnames';
import './index.less';
import { CloseOutlined } from '@ant-design/icons';
import CustomScroller from 'react-custom-scrollbars';

interface PropTypes {
  className?: string;
  style?: React.CSSProperties;
  children: JSX.Element | React.Component | JSX.Element[];
  /** 是否可见 */
  visible?: boolean;
  /** 标题 */
  title?: React.ReactNode | string | null;
  /** 是否显示右上角的关闭按钮 */
  closable?: boolean;
  zIndex?: number;
  bodyStyle?: React.CSSProperties;

  /** 传入panel body变成可滚动，默认使用css滚动，配合传入thumbStyle使用react-custom-scrollbars滚动*/
  height?: number;
  minHeight?: number;
  /** 使用react-custom-scrollbars滚动*/
  thumbStyle?: React.CSSProperties | boolean;
  closeIcon?: React.ReactNode;

  /** panel title下的分割线，支持自定义，默认提供一个 */
  divider?: React.ReactNode | null | undefined;
  /** 点击右上角叉时的回调 */
  onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
  /** 兼容api */
  onClose?: (e: React.MouseEvent<HTMLElement>) => void;
  footer?: React.ReactNode;
  /**初始化对齐右侧，如不需要可以干掉 **/
  bodyNoPadding?: boolean;
  /**是否自动隐藏滚动条，开启则自动使用js滚动条 **/
  autoHideScrollBar?: boolean;
}

const CustomPanel: React.FC<PropTypes> = ({
  className = '',
  style = {},
  children,
  title,
  visible = true,
  zIndex,
  bodyStyle = {},
  closable = true,
  height,
  minHeight,
  thumbStyle,
  divider,
  onCancel,
  onClose,
  footer,
  bodyNoPadding,
  autoHideScrollBar,
}: PropTypes) => {
  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (onCancel) {
      onCancel(e);
    }
    if (onClose) {
      onClose(e);
    }
  };

  const renderDivide = () => {
    if (divider === null) return null;
    if (divider === void 0) {
      return <div className="custom-panel-title-divider"></div>;
    }
    return divider;
  };
  const renderTitle = () => {
    return (
      <div className={cls('custom-panel-title')}>
        {title || ''}
        {closable && <CloseOutlined className="custom-panel-title-close" onClick={handleCancel} />}
        {renderDivide()}
      </div>
    );
  };

  const renderThumb = ({ style, ...props }) => {
    //设置滚动条的样式
    const defaultThumbStyle = {
      width: '6px',
      backgroundColor: 'rgba(255,255,255,0.3)',
      borderRadius: '6px',
      right: '4px',
      // right: '-6px',
    };

    if (typeof thumbStyle === 'object') {
      Object.assign(defaultThumbStyle, thumbStyle);
    }
    return (
      <div className="thumb-container" style={{ ...style, ...defaultThumbStyle }} {...props} />
    );
  };

  const renderBody = () => {
    let bodyHeight;
    let bodyMinHeight;
    if (height) {
      bodyHeight = height - 54;
      bodyMinHeight = minHeight === void 0 ? bodyHeight : minHeight;
      if (!thumbStyle) {
        bodyStyle.height = bodyHeight;
        bodyStyle.minHeight = bodyMinHeight;
      }
    }
    const isBodyNoPadding = bodyNoPadding === void 0 ? false : bodyNoPadding;
    return (
      <div
        className={cls('custom-panel-body', {
          'no-padding': isBodyNoPadding,
          'auto-hide-scrollbar': autoHideScrollBar,
        })}
        style={{ ...bodyStyle }}
      >
        {(thumbStyle || autoHideScrollBar) && bodyHeight ? (
          <CustomScroller
            autoHeight
            autoHeightMax={bodyHeight}
            autoHeightMin={bodyMinHeight}
            renderThumbVertical={renderThumb}
          >
            {children}
          </CustomScroller>
        ) : (
          children
        )}
      </div>
    );
  };

  if (zIndex) {
    style.zIndex = zIndex;
  }
  if (!visible) {
    return null;
  }
  return (
    <div className={cls('custom-panel', className)} style={style}>
      {title !== null && renderTitle()}
      {renderBody()}
      {footer}
    </div>
  );
};

export default CustomPanel;
